<template>
  <div class="pagination">
    <el-pagination
      :current-page="pageNo"
      :page-size="pageSize"
      :total="count"
      :page-sizes="[10,20, 50, 100, 200]"
      :pager-count="11"
      background
      layout="total,prev, pager, next,sizes,jumper"
      @size-change="handleSizeChange"
      @prev-click="onPrevClick"
      @next-click="onNextClick"
      @current-change="onCurrentChange"
    />
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: {
    count: {
      type: Number,
      required: true,
      default: 0,
    },
    pageNo: {
      type: Number,
      required: true,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    request: {
      type: Function,
      default: null,
    },
  },
  methods: {
    requestData() {
      this.$nextTick(() => {
        if (this.request) {
          this.request();
        }
      });
    },
    onPrevClick(val) {
      this.$emit("update:pageNo", val);
      this.$emit("onPagechange", val);
      this.requestData();
    },
    onNextClick(val) {
      this.$emit("update:pageNo", val);
      this.$emit("onPagechange", val);
      this.requestData();
    },
    onCurrentChange(val) {
      this.$emit("update:pageNo", val);
      this.$emit("onPagechange", val);
      this.requestData();
    },
    handleSizeChange(val) {
      this.$emit("update:pageSize", val);
      this.$emit("handleSizechange", val);
      this.requestData();
    },
  },
};
</script>

<style scoped lang="scss">
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
</style>
